<template>
  <div class="home">
    <NavList />
    <ContentList />
    <div class="toTop" v-show="toTop" @click="toTopHandle">回到顶部</div>
  </div>
</template>
<script>
import NavList from "@/components/nav-list"
import ContentList from "@/components/content-list"
import { mapState,mapActions } from 'vuex'
export default {
  components:{
    NavList,
    ContentList
  },
  data(){
    return {
      toTop:false
    }
  },
  
  created(){
    const tab=this.$route.query.tab;
    if(tab){
      this.setStatus(tab);
      this.setDataList(tab);
    }else{
      this.setStatus('all'); 
      this.setDataList('all');
    } 
  },
   methods:{
    ...mapActions(['setStatus','setDataList']),
    toTopFn(){
      console.log(document.documentElement.scrollTop);
      if(document.documentElement.scrollTop>400){
        this.toTop=true;
      }else{
        this.toTop=false;
      } 
    },

    toTopHandle(){
      let timer=null;
      timer=setInterval(()=>{
        document.documentElement.scrollTop-=100;
        if(document.documentElement.scrollTop<=0){
          document.documentElement.scrollTop=0;
          clearInterval(timer);
        }
      },10)
    }

  },
  mounted(){
    window.addEventListener('scroll',this.toTopFn)
  },
  destroyed(){
    window.removeEventListener('scroll',this.toTopFn);
  },
 
  async beforeRouteUpdate(to,from,next){
    await this.setDataList(to.query.tab);
    this.setStatus(to.query.tab);
    next();
  }
}
</script>

<style lang="scss" >

.home{
    margin: .05rem;
    border-radius: .05rem;
}


.toTop{
  width: .24rem;
  height: .8rem;
  background-color: #ccc;
  position:fixed;
  right:0;
  bottom:10%;
  text-align: center;
  padding: .2rem 0;
  border-radius: .1rem 0 0 .1rem;
  // display: none;
}

</style>
